<template>
  <div class="report-first">
    <section v-loading="loading" class="rf-first">
      <section class="top">
        <el-date-picker
          v-model="timeValue"
          type="daterange"
          align="left"
          unlink-panels
          @change="handleTimeChange"
          value-format="yyyy-MM-dd"
          range-separator="–"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          class='date-picker-input'>
        </el-date-picker>
      </section>
      <section class="middle">
        <section class="m-item" @click="changeMitem(1,'readUserList')">
          <div class="img-wrapper img1"></div>
          <section class="r-wrapper">
            <div class="w-top">阅读数</div>
            <div class="w-middle" style="color: #15C78A">
              <count-num :countNum="pageInfo.intPageReadUser || 0"></count-num>
            </div>
            <!-- <div class="w-bottom">人均阅读{{pageInfo.number_data.int_page_read_user_average}}次</div> -->
          </section>
          <div class="line line1" :class="mItem === 1 ? 'is-line' : ''"></div>
        </section>
        <section class="m-item" @click="changeMitem(2,'shareUserList')">
          <div class="img-wrapper img2"></div>
          <section class="r-wrapper">
            <div class="w-top">分享数</div>
            <div class="w-middle" style="color: #FA376C">
              <count-num :countNum="pageInfo.shareUser || 0"></count-num>
            </div>
            <!-- <div class="w-bottom">人均分享{{pageInfo.number_data.share_user_average}}次</div> -->
          </section>
          <div class="line line2" :class="mItem === 2 ? 'is-line' : ''"></div>
        </section>
        <section class="m-item" @click="changeMitem(3,'likeUserList')">
          <div class="img-wrapper img3"></div>
          <section class="r-wrapper">
            <div class="w-top">收藏数</div>
            <div class="w-middle" style="color: #FC713D">
              <count-num :countNum="pageInfo.addToFavUser || 0"></count-num>
            </div>
            <!-- <div class="w-bottom">人均在看{{pageInfo.number_data.add_to_fav_user_average}}次</div> -->
          </section>
          <div class="line line3" :class="mItem === 3 ? 'is-line' : ''"></div>
        </section>
        <section class="m-item" @click="changeMitem(4,'oriReadUserList')">
          <div class="img-wrapper img4"></div>
          <section class="r-wrapper">
            <div class="w-top">原文阅读数</div>
            <div class="w-middle" style="color: #3496FF">
              <count-num :countNum="pageInfo.oriPageReadUser || 0"></count-num>
            </div>
            <!-- <div class="w-bottom">人均阅读{{pageInfo.number_data.ori_page_read_user_average}}次</div> -->
          </section>
          <div class="line line4" :class="mItem === 4 ? 'is-line' : ''"></div>
        </section>
        <section class="m-item" @click="changeMitem(5,'openRateList')">
          <div class="img-wrapper img5"></div>
          <section class="r-wrapper">
            <div class="w-top">打开率</div>
            <div class="w-middle" style="color: #FFBA1D">
              <!-- {{(pageInfo.targetUser === 0 ? '0%' : pageInfo.intPageReadUser / pageInfo.targetUser).toFixed(2) + '%'}} -->
              <span>{{pageInfo | formatOpenScale}}</span>
            </div>
            <div class="w-bottom"></div>
          </section>
          <div class="line line5" :class="mItem === 5 ? 'is-line' : ''"></div>
        </section>
      </section>
      <section class="bottom">
        <!-- <div style="font-weight: bolder">趋势图</div> -->
        <div ref="echart1" class="e-chart1"></div>
      </section>
    </section>
    <section v-loading="loading1" class="rf-second">
      <div style="margin-bottom: 20px;font-weight: bolder">阅读数据</div>
      <el-date-picker
        v-model="timeValue1"
        type="date"
        @change="handleTimeChange1"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions1"
        placeholder="选择日期">
      </el-date-picker>
      <section class="center">
        <section class="chart2-wrapper">
          <div ref="echart2" class="e-chart2"></div>
        </section>
        <section class="chart3-wrapper">
          <div ref="echart3" class="e-chart3"></div>
        </section>
      </section>
    </section>
    <section v-loading="loading2" class="rf-third">
      <div style="margin-bottom: 20px;font-weight: bolder">图文数据</div>
      <el-date-picker
        style="margin-bottom: 16px;"
        v-model="timeValue2"
        type="daterange"
        align="left"
        unlink-panels
        @change="handleTimeChange2"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <span v-show="tableData.length > 0" style="margin-left: 20px;color: #FC713D;cursor: pointer">
        <!-- <a :href="currentUrl + `/api/test/wx/report/data/?download=true&wxId=${wxId}&userid=${userId}&type=end&ref_date_0=${timeValue2[0] || ''}&ref_date_1=${timeValue2[1] || timeValue2[0]}&page_size=${pageSize}&page=${page}`" style="color: #FC713D;">导出</a> -->
      </span>
      <el-table
        tooltip-effect="light"
        :data="tableData"
        highlight-current-row
        style="width: 100%">
        <el-table-column
          label="图文"
          show-overflow-tooltip
          fixed>
          <template slot-scope="scope">
            {{scope.row.title}}
            <div style="color: #666;font-size: 12px;">{{scope.row.ref_date}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="msgIndex"
          width="123"
          show-overflow-tooltip
          label="位置">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="123"
          prop="targetUser"
          label="送达人数">
        </el-table-column>
        <el-table-column
          prop="intPageReadUser"
          show-overflow-tooltip
          width="123"
          label="阅读人数">
        </el-table-column>
        <el-table-column
          width="123"
          show-overflow-tooltip
          label="打开率">
          <template slot-scope="scope">
            <!-- {{(scope.row.targetUser === 0 ? '0%' : scope.row.intPageReadUser/scope.row.targetUser).toFixed(2)*100 + '%'}} -->
            <span>{{scope.row | formatOpenScale}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="shareUser"
          width="123"
          show-overflow-tooltip
          label="分享人数">
        </el-table-column>
        <el-table-column
          width="123"
          prop="addToFavUser"
          show-overflow-tooltip
          label="收藏人数">
        </el-table-column>
        <el-table-column
          width="123"
          prop="oriPageReadUser"
          show-overflow-tooltip
          label="原文阅读人数">
        </el-table-column>
      </el-table>
      <section class="pagenation">
        <el-pagination
          background
          v-show='tableData.length'
          :page-size="pageSize"
          :page-sizes="pageSizesG"
          @size-change="handleSizeChange"
          :current-page="page"
          @current-change="handleCurrentChange"
          layout="sizes, prev, pager, next"
          :total="count">
        </el-pagination>
      </section>
    </section>
  </div>
</template>

<script>
import countNum from 'public/countNum'
const lineColorList = ['#3496FF', '#40C4FF', '#42D6A3', '#FF956E', '#FFD64E', '#FA6B92', '#9F89E8', '#E062AE', '#E690D1', '#7570F0', '#FFA3A3', '#FFCD9B', '#A0D167', '#80983D']
export default {
  components: {
    countNum
  },
  data () {
    return {
      wxId: sessionStorage.getItem('wxId'),
      userId: sessionStorage.getItem('userId'),
      loading: false,
      loading1: false,
      loading2: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '昨天',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 8)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近半个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 16)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Date.now() - 3600 * 1000 * 24
        }
      },
      timeValue: [],
      timeValue1: '',
      timeValue2: [],
      mItem: 1,
      cardId: 'readUserList',
      chart1: null,
      echart2: null,
      echart3: null,
      pageInfo: {
        addToFavUser: 0,
        intPageReadUser: 0,
        likeUserList: [],
        openRateList: [],
        oriPageReadUser: 0,
        oriReadUserList: [],
        readUserList: [],
        shareUser: 0,
        shareUserList: [],
        targetUser: 0
      },
      middleInfo: {},
      tableData: [],
      pageSize: 10,
      page: 1,
      count: 0
    }
  },
  computed: {
    colorList () {
      if (this.mItem === 1) {
        return ['#15C78A']
      } else if (this.mItem === 2) {
        return ['#FA376C']
      } else if (this.mItem === 3) {
        return ['#FC713D']
      } else if (this.mItem === 4) {
        return ['#3496FF']
      } else if (this.mItem === 5) {
        return ['#FFBA1D']
      }
    }
  },
  filters: {
    formatOpenScale (val) {
      if (val.targetUser === undefined || val.targetUser === 0) {
        return '0%'
      } else {
        return (val.intPageReadUser / val.targetUser).toFixed(2) + '%'
      }
    }
  },
  methods: {
    handleSizeChange (val) {
      this.page = 1
      this.pageSize = val
      this.getInfo('end', this.timeValue2)
    },
    handleCurrentChange (val) {
      this.page = val
      this.getInfo('end', this.timeValue2)
    },
    handleTimeChange () {
      this.getInfo('top', this.timeValue)
    },
    handleTimeChange2 () {
      this.page = 1
      this.getInfo('end', this.timeValue2)
    },
    handleTimeChange1 () {
      this.getInfos()
    },
    changeMitem (val, cardId) {
      this.mItem = val
      this.cardId = cardId
      this.init1()
    },
    // 下方echarts初始化
    init1 () {
      if (!this.chart1) {
        this.chart1 = window.echarts.init(this.$refs.echart1)
      }
      let msgIndex
      if (this.mItem - 1 === 4) {
        msgIndex = 0
      } else {
        msgIndex = 1
      }
      let option = {
        color: this.colorList,
        minInterval: msgIndex,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '2%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {color: '#333'},
            data: this.pageInfo.refDateList
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {color: '#333'}
          }
        ],
        series: this.pageInfo[this.cardId].series
      }
      this.chart1.setOption(option, { notMerge: true })
    },
    init2 () {
      if (!this.chart2) {
        this.chart2 = window.echarts.init(this.$refs.echart2)
      }
      let option = {
        color: lineColorList,
        title: {
          text: '阅读来源'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 'right',
          top: 'center',
          data: ['会话', '好友转发', '朋友圈', '历史消息页', '看一看', '搜一搜', '其他']
        },
        calculable: true,
        series: [
          {
            name: '人数比例',
            type: 'pie',
            radius: [30, 110],
            center: ['40%', '50%'],
            roseType: 'area',
            data: this.middleInfo.temp1
          }
        ]
      }
      this.chart2.setOption(option, { notMerge: true })
    },
    init3 () {
      if (!this.chart3) {
        this.chart3 = window.echarts.init(this.$refs.echart3)
      }
      let option = {
        color: ['#3496FF', '#42D6A3', '#FFBA1D'],
        title: {
          text: '阅读转化'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}人'
        },
        legend: {
          y: 20,
          data: ['送达', '阅读']
        },
        calculable: true,
        series: [
          {
            name: '比例',
            type: 'funnel',
            width: '60%',
            height: '50%',
            left: 'center',
            top: '25%',
            sort: 'none',
            data: this.middleInfo.temp2
          }
        ]
      }
      this.chart3.setOption(option, { notMerge: true })
    },
    // 时间戳转换判断是否需要加0
    add0 (m) {
      return m < 10 ? '0' + m : m
    },
    // 页面初始化请求数据
    getInfos () {
      // this.loading1 = true
      if (!sessionStorage.getItem('wechatId')) {
        this.middleInfo.temp1 = [
          {value: 0, name: '会话'},
          {value: 0, name: '好友转发'},
          {value: 0, name: '朋友圈'},
          {value: 0, name: '历史消息页'},
          {value: 0, name: '看一看'},
          {value: 0, name: '搜一搜'},
          {value: 0, name: '其他'}
        ]
        this.middleInfo.temp2 = [
          {value: 0, name: '送达'},
          {value: 0, name: '阅读'}
        ]
        this.init2()
        this.init3()
        return false
      }
      let appid = sessionStorage.getItem('appid')
      let url = `${this.SERVICE_WECHAT}/analyze/${appid}/news/readDistribution?date=${this.timeValue1 || ''}&date=${this.timeValue1 || ''}`
      this.get(url).then(rsp => {
        this.loading1 = false
        let temp1 =
        [
          {value: rsp.data.data.intPageFromSessionReadUser, name: '会话'},
          {value: rsp.data.data.intPageFromFriendsReadUser, name: '好友转发'},
          {value: rsp.data.data.intPageFromFeedReadUser, name: '朋友圈'},
          {value: rsp.data.data.intPageFromHistMsgReadUser, name: '历史消息页'},
          {value: rsp.data.data.intPageFromKanYiKanReadUser, name: '看一看'},
          {value: rsp.data.data.intPageFromSouYiSouReadUser, name: '搜一搜'},
          {value: rsp.data.data.intPageFromOtherReadUser, name: '其他'}
        ]
        let temp2 = [
          {value: rsp.data.data.targetUser, name: '送达'},
          {value: rsp.data.data.intPageReadUser, name: '阅读'}
        ]
        this.middleInfo.temp1 = temp1
        this.middleInfo.temp2 = temp2
        this.init2()
        this.init3()
        if (rsp.data.length === 0) {
          this.showErrMsg('当前查询的日期或条件没有符合的数据~')
        }
      }).catch(e => {
        this.loading1 = false
        // this.handleError(e)
      })
    },
    // 页面初始化请求数据
    getInfo (position, time) {
      if (position === 'top') {
        this.getTopData(time)
      } else if (position === 'end') {
        this.getEndData(time)
      }
    },
    // 获取日期的区间
    getdiffdate (stime, etime) {
      // 初始化日期列表，数组
      var diffdate = []
      var i = 0
      // 开始日期小于等于结束日期,并循环
      while (stime <= etime) {
        diffdate[i] = stime
        // 获取开始日期时间戳
        var stimeTs = new Date(stime).getTime()
        // 增加一天时间戳后的日期
        var nextDate = stimeTs + (24 * 60 * 60 * 1000)
        // 拼接年月日，这里的月份会返回（0-11），所以要+1
        var nextDatesY = new Date(nextDate).getFullYear() + '-'
        var nextDatesM = (new Date(nextDate).getMonth() + 1 < 10) ? '0' + (new Date(nextDate).getMonth() + 1) + '-' : (new Date(nextDate).getMonth() + 1) + '-'
        var nextDatesD = (new Date(nextDate).getDate() < 10) ? '0' + new Date(nextDate).getDate() : new Date(nextDate).getDate()
        stime = nextDatesY + nextDatesM + nextDatesD
        // 增加数组key
        i++
      }
      return diffdate
    },
    getTopData (time) {
      // this.loading = true
      // this.loading2 = true
      if (!sessionStorage.getItem('wechatId')) {
        this.handleInfo(time)
        this.init1()
        return false
      }
      let appid = sessionStorage.getItem('appid')
      let url = `${this.SERVICE_WECHAT}/analyze/${appid}/news?wechatId=${sessionStorage.getItem('wechatId')}&startTime=${(time && time[0]) || ''}&endTime=${(time && time[1]) || ''}`
      this.get(url).then(rsp => {
        this.loading = false
        this.loading2 = false
        this.pageInfo = rsp.data.data
        // this.pageInfo.openRate = (this.pageInfo.openRate * 100).toFixed(2) / 100
        // // 处理"阅读人数"--------------------
        // if (this.pageInfo.readUserList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.readUserList))
        //   this.pageInfo.readUserList = {}
        //   this.pageInfo.readUserList.legend = ['阅读人数']
        //   this.pageInfo.refDateList = this.getdiffdate(time[0] || '', time[1] || '')
        //   this.pageInfo.readUserList.series = []
        //   for (var j = 0; j < this.pageInfo.readUserList.legend.length; j++) {
        //     this.pageInfo.readUserList.series.push({name: '阅读人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var js = 0; js < this.pageInfo.refDateList.length; js++) {
        //     this.pageInfo.readUserList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.statDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
        //     }
        //     this.pageInfo.readUserList.series.forEach((eless, ind) => {
        //       this.pageInfo.readUserList.series[ind].data[index] = ele.userCount
        //     })
        //   })
        //   this.pageInfo.readUserList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //   })
        // }
        // // 处理"分享人数"--------------------
        // if (this.pageInfo.shareUserList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.shareUserList))
        //   this.pageInfo.shareUserList = {}
        //   this.pageInfo.shareUserList.legend = ['分享人数']
        //   this.pageInfo.shareUserList.series = []
        //   for (var x = 0; x < this.pageInfo.shareUserList.legend.length; x++) {
        //     this.pageInfo.shareUserList.series.push({name: '分享人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var xs = 0; xs < this.pageInfo.refDateList.length; xs++) {
        //     this.pageInfo.shareUserList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.statDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
        //     }
        //     this.pageInfo.shareUserList.series.forEach((eless, ind) => {
        //       this.pageInfo.shareUserList.series[ind].data[index] = ele.userCount
        //     })
        //   })
        //   this.pageInfo.shareUserList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //   })
        // }
        // // 处理"收藏人数"--------------------
        // if (this.pageInfo.likeUserList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.likeUserList))
        //   this.pageInfo.likeUserList = {}
        //   this.pageInfo.likeUserList.legend = ['收藏人数']
        //   this.pageInfo.likeUserList.series = []
        //   for (var y = 0; y < this.pageInfo.likeUserList.legend.length; y++) {
        //     this.pageInfo.likeUserList.series.push({name: '收藏人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var ys = 0; ys < this.pageInfo.refDateList.length; ys++) {
        //     this.pageInfo.likeUserList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.statDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
        //     }
        //     this.pageInfo.likeUserList.series.forEach((eless, ind) => {
        //       this.pageInfo.likeUserList.series[ind].data[index] = ele.userCount
        //     })
        //   })
        //   this.pageInfo.likeUserList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //   })
        // }
        // // 处理"原文阅读人数"--------------------
        // if (this.pageInfo.oriReadUserList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.oriReadUserList))
        //   this.pageInfo.oriReadUserList = {}
        //   this.pageInfo.oriReadUserList.legend = ['原文阅读人数']
        //   this.pageInfo.oriReadUserList.series = []
        //   for (var h = 0; h < this.pageInfo.oriReadUserList.legend.length; h++) {
        //     this.pageInfo.oriReadUserList.series.push({name: '原文阅读人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var hs = 0; hs < this.pageInfo.refDateList.length; hs++) {
        //     this.pageInfo.oriReadUserList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.statDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
        //     }
        //     this.pageInfo.oriReadUserList.series.forEach((eless, ind) => {
        //       this.pageInfo.oriReadUserList.series[ind].data[index] = ele.userCount
        //     })
        //   })
        //   this.pageInfo.oriReadUserList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //   })
        // }
        // // 处理"打开率"--------------------
        // if (this.pageInfo.openRateList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.openRateList))
        //   this.pageInfo.openRateList = {}
        //   this.pageInfo.openRateList.legend = ['打开率']
        //   this.pageInfo.openRateList.series = []
        //   for (var q = 0; q < this.pageInfo.openRateList.legend.length; q++) {
        //     this.pageInfo.openRateList.series.push({name: '打开率', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var qs = 0; qs < this.pageInfo.refDateList.length; qs++) {
        //     this.pageInfo.openRateList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.statDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
        //     }
        //     this.pageInfo.openRateList.series.forEach((eless, ind) => {
        //       this.pageInfo.openRateList.series[ind].data[index] = ele.openRate / 100
        //     })
        //   })
        //   this.pageInfo.openRateList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //   })
        // }
        this.handleInfo(time)
        this.init1()
        if (rsp.data.length === 0) {
          this.showErrMsg('当前查询的日期或条件没有符合的数据~')
        }
      }).catch(e => {
        this.loading = false
        this.loading2 = false
        // this.handleError(e)
      })
    },
    handleInfo (time) {
      this.pageInfo.openRate = (this.pageInfo.openRate * 100).toFixed(2) / 100
      // 处理"阅读人数"--------------------
      if (this.pageInfo.readUserList) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.readUserList))
        this.pageInfo.readUserList = {}
        this.pageInfo.readUserList.legend = ['阅读人数']
        this.pageInfo.refDateList = this.getdiffdate(time[0] || '', time[1] || '')
        this.pageInfo.readUserList.series = []
        for (var j = 0; j < this.pageInfo.readUserList.legend.length; j++) {
          this.pageInfo.readUserList.series.push({name: '阅读人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var js = 0; js < this.pageInfo.refDateList.length; js++) {
          this.pageInfo.readUserList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.statDate) {
            index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
          }
          this.pageInfo.readUserList.series.forEach((eless, ind) => {
            this.pageInfo.readUserList.series[ind].data[index] = ele.userCount
          })
        })
        this.pageInfo.readUserList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
        })
      }
      // 处理"分享人数"--------------------
      if (this.pageInfo.shareUserList) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.shareUserList))
        this.pageInfo.shareUserList = {}
        this.pageInfo.shareUserList.legend = ['分享人数']
        this.pageInfo.shareUserList.series = []
        for (var x = 0; x < this.pageInfo.shareUserList.legend.length; x++) {
          this.pageInfo.shareUserList.series.push({name: '分享人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var xs = 0; xs < this.pageInfo.refDateList.length; xs++) {
          this.pageInfo.shareUserList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.statDate) {
            index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
          }
          this.pageInfo.shareUserList.series.forEach((eless, ind) => {
            this.pageInfo.shareUserList.series[ind].data[index] = ele.userCount
          })
        })
        this.pageInfo.shareUserList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
        })
      }
      // 处理"收藏人数"--------------------
      if (this.pageInfo.likeUserList) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.likeUserList))
        this.pageInfo.likeUserList = {}
        this.pageInfo.likeUserList.legend = ['收藏人数']
        this.pageInfo.likeUserList.series = []
        for (var y = 0; y < this.pageInfo.likeUserList.legend.length; y++) {
          this.pageInfo.likeUserList.series.push({name: '收藏人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var ys = 0; ys < this.pageInfo.refDateList.length; ys++) {
          this.pageInfo.likeUserList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.statDate) {
            index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
          }
          this.pageInfo.likeUserList.series.forEach((eless, ind) => {
            this.pageInfo.likeUserList.series[ind].data[index] = ele.userCount
          })
        })
        this.pageInfo.likeUserList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
        })
      }
      // 处理"原文阅读人数"--------------------
      if (this.pageInfo.oriReadUserList) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.oriReadUserList))
        this.pageInfo.oriReadUserList = {}
        this.pageInfo.oriReadUserList.legend = ['原文阅读人数']
        this.pageInfo.oriReadUserList.series = []
        for (var h = 0; h < this.pageInfo.oriReadUserList.legend.length; h++) {
          this.pageInfo.oriReadUserList.series.push({name: '原文阅读人数', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var hs = 0; hs < this.pageInfo.refDateList.length; hs++) {
          this.pageInfo.oriReadUserList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.statDate) {
            index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
          }
          this.pageInfo.oriReadUserList.series.forEach((eless, ind) => {
            this.pageInfo.oriReadUserList.series[ind].data[index] = ele.userCount
          })
        })
        this.pageInfo.oriReadUserList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
        })
      }
      // 处理"打开率"--------------------
      if (this.pageInfo.openRateList) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.openRateList))
        this.pageInfo.openRateList = {}
        this.pageInfo.openRateList.legend = ['打开率']
        this.pageInfo.openRateList.series = []
        for (var q = 0; q < this.pageInfo.openRateList.legend.length; q++) {
          this.pageInfo.openRateList.series.push({name: '打开率', value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var qs = 0; qs < this.pageInfo.refDateList.length; qs++) {
          this.pageInfo.openRateList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.statDate) {
            index = this.pageInfo.refDateList.indexOf(ele.statDate.split(' ')[0])
          }
          this.pageInfo.openRateList.series.forEach((eless, ind) => {
            this.pageInfo.openRateList.series[ind].data[index] = ele.openRate / 100
          })
        })
        this.pageInfo.openRateList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
        })
      }
    },
    getEndData (time) {
      this.loading2 = true
      if (!time) {
        this.tableData = []
        this.count = 0
        this.loading2 = false
        return
      }
      let appid = sessionStorage.getItem('appid')
      let url = `${this.SERVICE_WECHAT}/analyze/${appid}/news/readGather?wechatId=${sessionStorage.getItem('wechatId')}&startTime=${time[0] || ''}&endTime=${time[1] || time[0]}&pageSize=${this.pageSize}&currentPage=${this.page}`
      this.get(url).then(rsp => {
        this.loading2 = false
        let data = rsp.data.data
        if (data) {
          this.count = +data.total
          if (data.list && data.list.length) {
            this.tableData = data.list
            this.tableData.forEach(ele => {
              ele.openRate = (ele.openRate * 100).toFixed(2) / 100
            })
          } else {
            this.tableData = []
            // this.showErrMsg('当前查询的日期或条件没有符合的数据~')
          }
        } else {
          this.tableData = []
          // this.showErrMsg('当前查询的日期或条件没有符合的数据~')
        }
      }).catch(e => {
        this.loading2 = false
        // this.handleError(e)
      })
    }
  },
  created () {

  },
  mounted () {
    // 时间进页面默认为昨天
    // let date = new Date()
    let tmp = new Date().getTime() - 3600 * 1000 * 24 * 31
    let time = new Date(tmp)
    let tmp1 = new Date().getTime() - 3600 * 1000 * 24
    let time1 = new Date(tmp1)
    // let todayTime = date.getFullYear() + '-' + this.add0(date.getMonth() + 1) + '-' + this.add0(date.getDate())
    let lastTime = time.getFullYear() + '-' + this.add0(time.getMonth() + 1) + '-' + this.add0(time.getDate())
    let lastTime1 = time1.getFullYear() + '-' + this.add0(time1.getMonth() + 1) + '-' + this.add0(time1.getDate())
    this.timeValue = []
    this.timeValue1 = ''
    this.timeValue2 = []
    this.timeValue.push(lastTime, lastTime1)
    this.timeValue1 = lastTime1
    this.timeValue2.push(lastTime, lastTime1)
    this.getInfo('top', this.timeValue)
    this.getInfos()
    this.getInfo('end', this.timeValue2)
    this.$nextTick(() => {
      window.onresize = () => {
        this.chart1 && this.chart1.resize()
        this.chart2 && this.chart2.resize()
        this.chart3 && this.chart3.resize()
      }
    })
  },
  activated () {
    this.getInfos()
  }
}
</script>

<style lang="stylus" scoped>
  .report-first
    position relative
    background #fafafa
    padding-right 10px
    .rf-first
      padding-left 10px
      background #fafafa
      .top
        padding 10px
        margin-bottom 10px
        background #fff
      .middle
        display flex
        justify-content space-between
        margin-bottom 20px
        height 118px
        .m-item
          flex 1
          position relative
          between()
          align-items center
          padded_box(border-box, 8px 24px 2px 8px)
          height 100%
          border-top-left-radius 4px
          border-top-right-radius 4px
          box-shadow 0 3px 12px 0 rgba(223,234,239,.7);
          cursor pointer
          transition all 0.2s ease
          background #fff
          .img-wrapper
            // border 1px solid red
            min-width 56px
            height 86px
            background-position center
            background-repeat no-repeat
            background-size 70px 70px
          .r-wrapper
            flex 1
            display flex
            flex-direction column
            justify-content space-around
            // padded_box(border-box, 13px 0)
            text-align right
            .w-top
              font-size 12px
            .w-middle
              font-size 20px
              line-height 40px
            .w-bottom
              color #7F7F7F
              font-size 12px
          .img1
            background-image url('../imgs/book.png')
          .img2
            background-image url('../imgs/share.png')
          .img3
            background-image url('../imgs/look.png')
          .img4
            background-image url('../imgs/read.png')
          .img5
            background-image url('../imgs/click.png')
          .line1
            background-color #15C78A
          .line2
            background-color #FA376C
          .line3
            background-color #FC713D
          .line4
            background-color #3496FF
          .line5
            background-color #FFBA1D
          .line
            position absolute
            left 0
            bottom 0px
            opacity .1
            width 100%
            height 8px
            border-bottom-left-radius 4px
            border-bottom-right-radius 4px
            transition opacity ease .4s
          .is-line
            opacity 1
        .m-item + .m-item
          margin-left 10px
        .m-item:hover
          box-shadow 0px 2px 18px rgba(0, 0, 0, .1)
      .bottom
        background #fff
        .e-chart1
          width 100%
          height 310px
    .rf-second
      margin-top 20px
      padded_box(border-box, 18px 30px 30px)
      background #fff
      border-radius 10px
      margin-left 10px
      .center
        display flex
        justify-content space-around
        align-items center
        margin-top 20px
        .chart2-wrapper
          width 453px
          height 336px
          .e-chart2
            width 513px
            height 336px
        .chart3-wrapper
          width 392px
          height 254px
          .e-chart3
            width 392px
            height 254px
    .rf-third
      margin-top 20px
      margin-left 10px
      padded_box(border-box, 20px 30px)
      background #fff
      border-radius 10px
      .pagenation
        center()
        margin-top 20px
</style>
